<html>
    <head>
        <style>
            #a{
                width: 200px;
                height: 200px;
                padding: 30px;
                background-color: aqua;
            }
            #b{
                width: 100px;
                height: 100px;
                padding: 30px;
                background-color: bisque;
            }
            #c{
                width: 50px;
                height: 50px;
                padding: 30px;
                background-color: darkcyan;
            }
        </style>
    </head>
    <body>
        <div id="a">
            a
            <div id="b">
                b
                <div id="c">
                    c
                </div>
            </div>
        </div>
        <script>
            //true 捕获   外面先捕获处理再传递到内部   a-->b-->c
            //false 冒泡   c-->b-->a
            a.addEventListener("click",function(){alert("a")},false);
            b.addEventListener("click",function(){alert("b");event.stopPropagation},false);
            c.addEventListener("click",function(){alert("c")},false);


            //停止传递事件 event.stopPropagetion();
            //停止执行元素的默认行为 event.preventDefault();
            //input输入框keyDown()事件中如果执行event.preventDefault();按键的内容不会放入输入框a
        </script>
    </body>
</html>